<template>
  <div class='app-container'>
     <el-card>
      <div class="top">试题录入</div>
      <!-- 表单 -->
      <el-form ref="form"
               :rules="rules"
               :model="form"
               label-width="80px">

        <el-form-item label="学科"
                      prop="subjectID">
          <el-select placeholder="请选择学科"
                     @change="getMenusList"
                     v-model="form.subjectID">
            <el-option v-for="(item,index) in subjectsList"
                       :key="index"
                       :label="item.subjectName"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="目录"
                      prop="catalogID">
          <el-select placeholder="请选择目录"
                     v-model="form.catalogID">
            <el-option v-for="(item,index) in menusList"
                       :key="index"
                       :label="item.directoryName"
                       :value="item.id"></el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="企业"
                      prop="enterpriseID">
          <el-select placeholder="请选择企业"
                     v-model="form.enterpriseID">
            <el-option v-for="(item,index) in companysList"
                       :key="index"
                       :label="item.remarks"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="城市"
                      class="city"
                      prop="city">
          <el-select v-model="form.province"
                     @change="getCitys"
                     placeholder="请选择省">
            <el-option v-for="(item,index) in provincesList"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>
          </el-select>

          <el-select v-model="form.city"
                     prop="city"
                     placeholder="请选择市区">
            <el-option v-for="(item,index) in citysList"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="方向">
          <el-select placeholder="请选择方向"
                     v-model="form.direction">
            <el-option v-for="(item,index) in directionList"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="题型"
                      prop="direction">
          <template>
            <el-radio v-model="form.questionType"
                      label="1">单选</el-radio>
            <el-radio v-model="form.questionType"
                      label="2">多选</el-radio>
            <el-radio v-model="form.questionType"
                      label="3">简答</el-radio>
          </template>
        </el-form-item>

        <el-form-item label="难度"
                      prop="questionType">
          <template>
            <el-radio v-model="form.difficulty"
                      label="1">简单</el-radio>
            <el-radio v-model="form.difficulty"
                      label="2">一般</el-radio>
            <el-radio v-model="form.difficulty"
                      label="3">困难</el-radio>
          </template>
        </el-form-item>

        <el-form-item label="题干"
                      prop="difficulty"
                      class="steams">
          <quill-editor class="stem"
                        v-model="form.question">
          </quill-editor>
        </el-form-item>

        <el-form-item label="选项"
                      prop="question"
                      v-if="form.questionType == 1"
                      class="checked">
          <template>
            <el-radio @change="changedanxuan(index)"
                      v-model="checked"
                      v-for="(item,index) in form.options"
                      :key="index"
                      :label="index + 1">{{String.fromCharCode(form.options[index].code)}}：
              <el-input v-model="form.options[index].title"
                        class="inputs"
                        placeholder="请输入内容"></el-input>
              <el-upload class="upload-demo"
                         :action="form.options[index].img"
                         multiple
                         list-type="picture-card"
                         :auto-upload="false"
                         :limit="10">
                <i slot="default"
                   style="font-size:12px"
                   class="el-icon-plus"></i>
                <div slot="file"
                     slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail"
                       :src="file.url"
                       alt="">
                </div>

              </el-upload>
            </el-radio>
          </template>
        </el-form-item>

        <el-form-item label="选项"
                      prop="question"
                      v-else-if="form.questionType == 2"
                      class="checkLists">
          <template>
            <el-checkbox-group @change="changeduoxuan(index)"
                               v-model="checkList"
                               v-for="(item,index) in form.options"
                               :key="index">
              <el-checkbox :label="index">{{String.fromCharCode(form.options[index].code)}}：
                <el-input v-model="form.options[index].title"
                          placeholder="请输入内容"></el-input>
                <el-upload class="upload-demo"
                           :action="form.options[index].img"
                           multiple
                           list-type="picture-card"
                           :auto-upload="false"
                           :limit="10">
                  <i slot="default"
                     style="font-size:12px"
                     class="el-icon-plus"></i>
                  <div slot="file"
                       slot-scope="{file}">
                    <img class="el-upload-list__item-thumbnail"
                         :src="file.url"
                         alt="">
                  </div>

                </el-upload>
              </el-checkbox>
            </el-checkbox-group>
          </template>
          <br>
          <el-button type="primary"
                     @click="addoptions">添加选项和答案</el-button>
        </el-form-item>

        <el-form-item label="解析视频">
          <el-input v-model="form.videoURL"
                    placeholder="请输入内容"></el-input>
        </el-form-item>

        <el-form-item label="答案解析"
                      prop="answer">
          <quill-editor class="stem"
                        v-model="form.answer">
          </quill-editor>
        </el-form-item>

        <el-form-item class="remarks"
                      label="题目备注">
          <el-input v-model="form.remarks"
                    type="textarea"
                    resize="none"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"></el-input>
        </el-form-item>

        <el-form-item label="试题标签"
                      prop="tags">
          <el-select v-model="form.tags"
                     multiple
                     placeholder="请选择试题标签">
            <el-option v-for="(item,index) in tagsList"
                       :key="index"
                       :label="item.tagName"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary"
                     @click="onSubmit(form)">确认修改</el-button>
        </el-form-item>

      </el-form>

    </el-card>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects.js'
import { list as getmenuslist } from '@/api/hmmm/directorys.js'
import { list as getcompanyslist } from '@/api/hmmm/companys.js'
import { list as gettagslist } from '@/api/hmmm/tags.js'
import { add } from '@/api/hmmm/questions.js'
import { detail } from '@/api/hmmm/questions.js'

import { provinces, citys } from '@/api/hmmm/citys'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  },
  data() {
    name: 'Questions'
    return {
      form: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '',
        question: '',
        options: [
          { code: 65, img: '', title: '', isRight: false },
          { code: 66, img: '', title: '', isRight: false },
          { code: 67, img: '', title: '', isRight: false },
          { code: 68, img: '', title: '', isRight: false }
        ],
        videoURL: '',
        answer: '',
        remarks: '',
        tags: ''
      },
      subjectsList: [],
      menusList: [],
      companysList: [],
      directionList: ['O2O', '外包服务', '企业服务', '互联网金融', '企业咨询', '互联网', '电子商务', '其他'],
      provincesList: provinces(),
      citysList: [],
      tagsList: [],
      tag: [],
      file: {
        url: ''
      },
      checkList: [],
      checked: '',
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'change' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'change' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'change' }],
        city: [{ required: true, message: '请选择地区', trigger: 'change' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'change' }],
        questionType: [{ required: true, message: '请选择题型', trigger: 'change' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'change' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }],
        tags: [{ required: true, message: '请选择标签', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getSubjectsList()
    this.getCompanysList()
    this.modifyqusetion()
  },
  methods: {
    async modifyqusetion() {
      const qusetionurl = window.location.href
      const qusetionId = qusetionurl.split('?')[1]
      if (qusetionId === undefined) return
      const Id = qusetionId.split('=')[1]
      const { data: res } = await detail({
        id: Id
      })
      this.form = res
    },
    async onSubmit(form) {
      console.log(this.$refs.form.validate)
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.form.tags = this.form.tags.join(',')
          try {
            const { data: res } = await add(this.form)
            this.$message.success('提交成功')
          } catch (error) {
            this.$message.error('提交失败')
          }
        } else {
          this.$message.error('请完整填写表单')
          return false
        }
      })
    },
    addoptions() {
      this.form.options.push({
        code: this.form.options[this.form.options.length - 1].code + 1,
        img: '',
        title: '',
        isRight: false
      })
    },
    async getSubjectsList() {
      const { data: res } = await list({
        page: 1,
        pagesize: 50
      })
      this.subjectsList = res.items
    },
    async getMenusList() {
      const { data: res } = await getmenuslist({
        subjectID: this.form.subjectID
      })
      this.menusList = res.items
      const { data: resulus } = await gettagslist({
        subjectID: this.form.subjectID
      })
      this.tagsList = resulus.items
    },
    async getCompanysList() {
      const { data: res } = await getcompanyslist()
      this.companysList = res.items
    },
    getCitys(val) {
      this.citysList = citys(val)
    },
    changedanxuan(index) {
      for (let i = 0; i < this.form.options.length; i++) {
        this.form.options[i].isRight = false
      }
      this.form.options[index].isRight = true
    },
    changeduoxuan(index) {
      this.form.options[index].isRight = !this.form.options[index].isRight
      console.log(this.form.options[index].isRight)
    }
  }
}
</script>

<style scoped lang='less'>
.app-container {
  .top {
    height: 50px;
    border-bottom: 1px solid #ebeef5;
    line-height: 50px;
    margin-bottom: 20px;
  }
  .el-select {
    width: 400px;
  }
  .city {
    .el-select {
      width: 195px;
      margin-right: 10px;
    }
  }
  .steams {
    margin-bottom: 100px;
  }
  .stem {
    height: 300px;
  }
  .checked {
    margin-top: 80px;
    .el-radio {
      margin-top: 20px;
      display: block;
      height: 200px;
      position: relative;
      .upload-demo {
        padding: 0;
        margin: 0;
        position: absolute;
        display: inline-block !important;
        .div {
          width: 100%;
          height: 100%;
        }
      }
      .el-button {
        margin-left: 10px;
      }
    }
  }
  .checkLists {
    .el-checkbox {
      margin-top: 20px;
      display: block;
      height: 200px;
      position: relative;
      .upload-demo {
        padding: 0;
        margin: 0;
        position: absolute;
        display: inline-block !important;
        .div {
          width: 100%;
          height: 100%;
        }
      }
      margin-top: 20px;
      .el-input {
        padding-left: 20px;
      }
      .el-button {
        margin-top: 10px;
      }
    }
  }
  .el-input {
    width: 500px;
  }
  .remarks {
    margin-top: 110px;
    width: 500px;
  }

  .inputs {
    padding-top: 50px;
  }
  .avatar-uploader {
    display: inline-block;
    vertical-align: middle;
    .el-upload--picture-card {
      height: 60px;
      width: 120px;
      line-height: 70px;
      vertical-align: middle;
      margin-bottom: 10px;
    }
  }
}
</style>
